<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #tx{
      width: 300px;
      transition: all .3s;
      height: 40px;
      overflow: hidden;
      outline: none;
    }
    #tx:focus{
      height: 50px;
    }
    #submit{
      width: 60px;
      height: 45px;
      background-color: #4d8ee9;
      color: #fff;
      border: none;
      outline: none;
      cursor: pointer;
      margin-left: 10px;
    }
    .box{
        display: flex;
        width: 500px;
        height: 50px;
    }
    .Total-box{
      position: relative;
      width: 300px;
    }
    .total{
      position: absolute ;
      right: 0;
      margin-left: 10px;
      margin-top: 10px;
      opacity: 0;
      transition: all 0.5s;
    }
    .content{
      width: 500px;
      height: 200px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="box">
    <textarea id="tx" type="text"></textarea>
    <div class="btn">
      <button id="submit">提交</button>
      </div>
  </div>
  <div class="Total-box">
    <div class="total">
    </div>
  </div>
  <div class="content">
    <div class="text"></div>
  </div>
  
  <script>
    const tx = document.querySelector('#tx');
    const total = document.querySelector('.total');
    const submit = document.querySelector('#submit');
    const text = document.querySelector('.content .text');
    tx.addEventListener('focus',function(){
      submit.style.height = '55px'
      submit.style.transition = 'all .3s'
    })
    tx.addEventListener('blur',function(){
      submit.style.height = '45px'
    })
    tx.addEventListener('input',function(){
      total.style.opacity = 1;
      total.innerHTML = `${tx.value.length}/20字`;
      if(tx.value.length > 20){
        total.style.color = 'red';
      }else{
        total.style.color = '#000';
      }
    })

    submit.addEventListener('click',function(){
      if(tx.value.length > 20){
        alert('超出字数限制');
      }else if(tx.value.length == 0){
        alert('请输入内容');
      }else{
        alert('提交成功');
        text.innerHTML += `${tx.value}<br/>`;
        total.innerHTML = '0/20字'
        tx.value = ''
      }
    })
    tx.addEventListener('keyup',function(e){
      if(e.key === 'Enter'){
        text.innerHTML += `${tx.value.trim()}<br/>`
        console.log(tx.value.trim());
        tx.value = ''
        total.innerHTML = '0/20字'
        
      }
    })
  </script>
</body>
</html>